<template>
  <div>
    <el-card>
      <LiveOverview :tabs="realTimeData" @refresh="handleRefresh">
        <div slot="search">
          <el-form :inline="true" label-width="100px" style="display: flex">
            <el-form-item label="时间周期：">
              <el-date-picker
                v-model="formOption.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                valueFormat="yyyy-MM-dd"
                style="width: 300px"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="客户信息：">
              <ScrollSelect
                placeholder="请选择用户信息"
                :selected-value="formOption.userId"
                :get-list-methods="getListMethods"
                :get-list-format="getListFormat"
                :clearable="true"
                search-key="nickNameOrMobile"
                @selectedChange="selectedChange"
              />
            </el-form-item>

            <el-form-item label="状态：">
              <el-select v-model="formOption.status" clearable placeholder="请选择兑换状态">
                <el-option
                  v-for="(item, index) in EXCHANGE_STATUS"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item style="flex: 1; text-align: right">
              <el-button type="primary" @click="search">筛选</el-button>
              <el-button @click="reset">重置</el-button>
              <el-button @click="exportFile">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
      </LiveOverview>
    </el-card>
    <el-card class="mt-20">
      <div>
        <Tabs :tabs="tabs" :currentKey="currentTab" @tab-click="tabClick" />
        <IntegralSupportTable ref="integralSupportTable" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { EXCHANGE_STATUS } from '@/enum/integral'
import { useFilterStatistics } from '@/hooks'
import IntegralSupportTable from '@/views/integral/integral-settlement/components/integralSupportTable'
export default {
  name: 'integralSupport',
  components: {
    IntegralSupportTable
  },
  data() {
    return {
      // 表单搜索配置
      formOption: {
        time: [],
        status: '',
        userId: '',
        platform: 2
      },
      realTimeData: [
        {
          isShow: true,
          baseData: {
            key: 'totalIncomeAmount',
            label: '平台累计支入积分',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '各平台累计支入好物积分'
          },
          yesterdayData: {
            key: 'totalIncomeAmount',
            isShow: true,
            value: '',
            isUnit: {
              startText: '上月'
            }
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'incomeNum',
            label: '平台累计支入笔数',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '各平台累计支入笔数'
          },
          yesterdayData: {
            key: 'incomeNum',
            isShow: true,
            value: '',
            isUnit: {
              startText: '上月'
            }
          }
        }
      ],
      currentTab: 'integral',
      tabs: [
        { label: '好物平台', num: '', key: 'integral', value: 2 },
        { label: '秦宗平台', num: '', key: 'repast', value: 32 },
        { label: '酒馆长平台', num: '', key: 'tavern', value: 4 },
        { label: '机咖平台', num: '', key: 'jika', value: 16 },
        { label: '挖咖平台', num: '', key: 'waka', value: 8 }
      ],
      getListMethods: params => {
        return this.getUserSelectList(params)
      },
      getListFormat: (list = []) => {
        // 下拉框数据格式
        return list.map(({ nickName, mobile, id }) => ({
          label: `${nickName} ${mobile}`,
          value: id
        }))
      }
    }
  },
  computed: {
    EXCHANGE_STATUS() {
      return EXCHANGE_STATUS
    }
  },
  created() {
    this.handleIntegralList()
    this.handleIntegralTabs()
    this.handleSettlementStatistics()
  },
  methods: {
    //刷新
    handleRefresh() {
      this.handleIntegralTabs()
      this.handleIntegralList()
      this.handleSettlementStatistics()
    },
    //获取tab值
    tabClick({ key, value }) {
      console.log(key, value)
      this.currentTab = key
      this.formOption.platform = value
      this.handleIntegralList(1)
    },
    //获取参数
    handleParams() {
      let params = {}
      const { time, status, userId, platform } = this.formOption
      if (time && time.length) params.startDate = time[0]
      if (time && time.length) params.endDate = time[1]
      if (status) params.status = status
      if (userId) params.userId = userId
      if (platform) params.platform = Number(platform)
      params.transactionType = 0
      return params
    },
    // 获取积分结算-数据概况
    async handleSettlementStatistics() {
      const params = this.handleParams()
      const { data } = await this.$http.integral.integralSettlementApi.getIntegralStatistics(params)

      // 统计数据
      const realTimeData = {
        baseData: {
          ...data.baseData
        },
        yesterdayData: { ...data.yesterdayData }
      }

      const { time } = this.formOption
      const flag = time && time.length ? false : true
      this.realTimeData = useFilterStatistics(this.realTimeData, realTimeData, flag)
    },
    //获取积分列表
    handleIntegralList(type) {
      const params = this.handleParams()
      if (type) params.type = 1
      this.$nextTick(() => {
        this.$refs.integralSupportTable.handleIntegralList(params)
      })
    },
    //获取积分列表tab统计
    async handleIntegralTabs() {
      const params = this.handleParams()
      delete params.platform
      const {
        data: { inners }
      } = await this.$http.integral.integralSettlementApi.getIntegralTabs(params)
      // 统计
      this.tabs = this.tabs.map(item => {
        inners.forEach(v => {
          if (v.platform === item.value) {
            item.num = v.tabNum || 0
          }
        })
        return item
      })
    },
    // 获取用户信息
    async getUserSelectList(params) {
      const {
        data: { records }
      } = await this.$http.user.user.getUserSelectList({ params })
      return records
    },
    // 监听选择用户信息
    selectedChange(id) {
      this.formOption.userId = id
    },

    search() {
      this.handleSettlementStatistics()
    },
    reset() {
      this.formOption = {
        time: [],
        status: '',
        userId: ''
      }
      this.handleSettlementStatistics()
    },
    exportFile() {
      const params = this.handleParams()
      this.$nextTick(() => {
        this.$refs.integralSupportTable.exportFile('part', params)
      })
    }
  }
}
</script>

<style scoped></style>
